import React, {useState, useEffect} from 'react';
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import home_1 from "@/assets/images/tabbar/home_1.png"
import home_2 from "@/assets/images/tabbar/home_2.png"
import my_1 from "@/assets/images/tabbar/my_1.png"
import my_2 from "@/assets/images/tabbar/my_2.png"
import fast from "@/assets/images/tabbar/fast.png"
import './index.less'
import { useHistory } from 'react-router-dom';


const useStyles = makeStyles({
  root: {
    width: '100%',
  },
});

export default function SimpleBottomNavigation() {
  const history = useHistory()
  
  const classes = useStyles();
  const [value, setValue] = useState(0);
  const [showTabbar, setShowTabbar] = useState(true);
  // 在赋值给value之前，需要判断，根据当前路由地址决定value等于多少
  useEffect(() => {
    //useEffect是异步的
    // console.log(history)
    switch (history.location.pathname) {
      case '/home':
        setValue(0);
        setShowTabbar(true);
        break;
      case '/fast':
        setValue(1);
        setShowTabbar(true);
        break;
      case '/user':
        setValue(2);
        setShowTabbar(true);
        break;
      default:
        setValue(0);
        setShowTabbar(false);
        break;
    }
  },[history.location.pathname]) // 检测路由的更新

  return (
    <BottomNavigation
      value={value}
      style={{display: showTabbar ? 'flex' : 'none'}}
      onChange={(event, newValue) => {
        setValue(newValue);
        // console.log('newValue',newValue)
        switch (newValue) {
          case 0:
            history.push('/home');
            break;
          case 1:
            history.push('/fast');
            break;
          case 2:
            history.push('/user');
            break;
          default:
            break;
        }
      }}
      showLabels
      className={classes.root}
    >
      <BottomNavigationAction label="首页" icon={<img src={value===0 ? home_1 : home_2} alt=''/>} />
      <BottomNavigationAction label="快速刷题" icon={<img src={fast} alt=''/>} />
      <BottomNavigationAction label="我的" icon={<img src={value===2 ? my_1 : my_2} alt=''/>} />
    </BottomNavigation>
  );
}
